<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 逐帧动画：steps，是css中用于控制动画分段执行的计时函数，通过将动画分割为离散的步骤，实现类似传统帧动画的跳跃效果 -->

    <!-- 流光渐变效果 -->
    <style>
        * {
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }

        html,body {
            width: 100%;
            height: 200%;
        }

        /* text01 */
        .small01 {
            padding: 5px;
            margin: 50px auto;
            width: 200px;
            height: 100px;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        } 

        .small01::before {
            content: '';
            width: 200%;
            height: 100%;
            background: linear-gradient(45deg,red,orange,yellow,green,blue,purple) left/50%,100%;
            position: absolute;
            left: 0%;
            top: 0%;
            animation: move 1s linear infinite;
        }

        @keyframes move {
            to {
                transform: translateX(-50%);
            }
        }

        .small011 {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background-color: #222;
            color: #ffffff;
            display: block;
            font-size: 20px;
            line-height: 90px;
            text-align: center;
            position: relative;
        }

        /* text02 */
        .small02 {
            margin: 50px auto;
            padding: 15px;
            width: 300px;
            height: 300px;
            border-radius: 40px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .small02::before {
            content: '';
            width: 130%;
            height: 130%;
            background-image: conic-gradient(transparent,transparent,transparent,skyblue);
            display: block;
            animation: rotate linear 4s infinite;
            position: absolute;
        }

        @keyframes rotate {
            to {
                transform: rotate(360deg);
            }
        }

        .small021 {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            background-color: #4387b14f;
            color: #ffffff;
            font-size: 30px;
            text-align: center;
            line-height: 270px;
            position: relative;
        }
    </style>

</head>
<body>
    <!-- text01 -->
    <div class="small01">
        <span class="small011">开始</span>
    </div>

    <!-- text02 -->
    <div class="small02">
        <span class="small021">begin</span>
    </div>
</body>
</html>